<template>
	<view class="box-page">
		<view style="width: 100%;" class="withdraw-page d-flex direction-column" v-for="(item, index) in list"
			:key="index">
			<view class="withdraw-item d-flex align-items-center" style="margin-top: 30rpx;">
				<text class="remark">订单号:{{ item.orderid }}</text>
			</view>
			<view class="d-flex direction-column">
				<view class="withdraw-item  align-items-center justify-between">
					<view class="wrapper" v-for="(i, index) in item.itemsJson" :key="index">
						<view class="address-box">
							<text class="address">{{ i.goodname }}</text>
						</view>
						<view style="width: 100%;">
							<image :src="i.picture" style="width: 100%;"></image>
						</view>
						<view class="u-box">
							<text class="name">数量:{{ i.buynumber }}</text>
							<text class="name">状态:{{ item.status }}</text>
							<text class="name">购物袋:{{ item.tablename === '' ? '无' : item.tablename }}</text>
							<text class="name">总价:{{ item.total }}</text>
							<text class="name">下单时间:{{ item.addtime }}</text>
						</view>
					</view>
					<view class="bottom-btn-box">
						<button style="background-color: #228B22;" @click="loadList(item.orderid)"
							class="cu-btn round bg-red shadow-blur">确认核销</button>
						<button @click="back()" class="cu-btn round bg-red shadow-blur">返回扫码</button>
					</view>

				</view>
			</view>
			<!-- <view v-else>
			<view class="withdraw-item d-flex align-items-center justify-between">
				<text class="remark"></text>
				<text class="remark">没有数据 </text>
				<text class="time"></text>
			</view>
		</view> -->
		</view>
	</view>
</template>

<script>
import {
	mapState, mapMutations
} from 'vuex';
export default {
	computed: {
		...mapState('goods', ['hxOrderList'])
	},
	data() {
		return {
			list: [],
			empty: true,

		};
	},
	onLoad(options) {
		// #ifdef H5
		this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
		// #endif

		console.log(this.hxOrderList);
		const itemsJson = this.hxOrderList.map(item => {
			item.itemsJson = JSON.parse(item.itemsJson);
			return item;
		});
		this.list = itemsJson;

	},
	methods: {
		...mapMutations('goods', ['clearHxOrderList','setPrinterOrderList']),
		loadList(orderId) {
			this.$ajax.get('orders/update?orderid=' + orderId).then(data => {
				if (data.success) {
					console.log(data.result);
					this.checkOrderStatus(orderId);
				} else {
					this.$toast('订单不存在');
				}
			})
		},
		checkOrderStatus(orderId) {
			this.$ajax.get('orders/checkOrderStatus?orderId=' + orderId).then(res => {
				console.log(res);
				if (res.success) {
					console.log(res.result);
					this.$toast('核销成功');
					this.setPrinterOrderList(res.result);
					this.clearHxOrderList();
					// 返回上一页
					uni.navigateBack();
				}
			})
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $page-color-base;
}

.box-page {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.address-box {
	display: flex;
	align-items: center;

	.tag {
		font-size: 24upx;
		color: $base-color;
		margin-right: 10upx;
		background: #fffafb;
		border: 1px solid #ffb4c7;
		border-radius: 4upx;
		padding: 4upx 10upx;
		line-height: 1;
	}

	.address {
		font-size: 36upx;
		color: $font-color-dark;
	}
}

.u-box {
	color: #333333;
	margin-top: 16upx;
	display: flex;
	flex-direction: column;
	font-size: 36rpx;

	.name {
		margin-right: 30upx;
	}
}

.withdraw-page {
	input {
		border-bottom: 4rpx solid $base-color;
		padding: 20rpx;
		box-sizing: content-box;
		margin-bottom: 20rpx;
	}

	.submit-btn {
		margin-top: 40rpx;
	}

	.withdraw-box {
		background-color: #ffffff;
		margin-bottom: 30rpx;
		padding: 30rpx;
		padding-top: 10rpx;
		box-shadow: 0 12rpx 40rpx -20rpx rgba($color: #000000, $alpha: 0.15);
	}

	.withdraw-item {
		background-color: #ffffff;
		padding: 20rpx;

		.price {
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;

			&:before {
				content: '￥';
				font-size: 26rpx;
			}
		}

		.remark {
			color: #000000;
			font-size: 36rpx;
		}

		.time {
			color: #999999;
			font-size: $font-sm;
		}

		&:not(:last-child) {
			border-bottom: 1px solid #eee;
		}
	}
}

.bottom-btn-box {
	display: flex;
}

.bottom-btn-box button {
	margin: auto;
}
</style>
